<template>
  <el-card>
    <div>
      <el-button type="primary" @click="handleSwitch(0)">page1</el-button>
      <el-button type="success" @click="handleSwitch(1)">page2</el-button>
      <el-button type="warning" @click="handleSwitch(2)">page3</el-button>
    </div>
    <div class="parentarea">
      <div class="area1">
        <page1 v-show="pageswitch===0?true:false"></page1>
        <page2 v-show="pageswitch===1?true:false"></page2>
        <page3 v-show="pageswitch===2?true:false"></page3>
      </div>
      <div class="area2">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          @change="handleChange"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-select v-model="value2" placeholder="请选择小区" @change="handleOptions1($event)">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item">
          </el-option>
        </el-select>
        <el-select v-model="value3" placeholder="请选择几号楼" @change="handleOptions2">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
  </el-card>
</template>

<script>
import page1 from '@/switchs/page1'
import page2 from '@/switchs/page2'
import page3 from '@/switchs/page3'

export default {
name: "spageone",
  components:{
    page1,
    page2,
    page3
  },
  data() {
    return {
      pageswitch:0,
      value1:new Date(),
      value2:'',
      value3:'',
      options2:[],
      options1:[
        {
          label:'第一小区',
          value:'第一小区',
          children: [{label:'1号', value:'1号楼'},
                     {label:'2号', value:'2号楼'},
                     {label:'3号', value:'3号楼'}
          ]
        },
        {
          label:'第二小区',
          value:'第二小区',
          children: [{label:'4号', value:'4号楼'},
            {label:'5号', value:'5号楼'},
            {label:'6号', value:'6号楼'}
          ]
        },
        {
          label:'第三小区',
          value:'第三小区',
          children: [{label:'7号', value:'7号楼'},
            {label:'8号', value:'8号楼'},
            {label:'9号', value:'9号楼'}
          ]
        }
      ],
      local1:[
        {
          label:'1号',
          value:'1号楼'
        },
        {
          label:'2号',
          value:'2号楼'
        },
        {
          label:'3号',
          value:'3号楼'
        },
      ],
      local2:[
        {
          label:'4号',
          value:'4号楼'
        },
        {
          label:'5号',
          value:'5号楼'
        },
        {
          label:'6号',
          value:'6号楼'
        }
      ]
    }
  },
  mounted(){//设置默认值
    this.value2 = this.options1[0].value;
    this.options = this.options1[0].children;
    this.value3 = this.options[0].value
  },
  methods: {
    handleSwitch(event){
      console.log("111",event);
      this.pageswitch = event;
    },
    handleChange(event){
      console.log("222",event)
    },
    handleOptions1(event) {
      console.log(event)
      // if(this.value2=='第一小区'){
        this.options2 = event.children
      // }
      // else{
      //   this.options2 = this.local2
      // };
      this.value3 = this.options2[0].value
    },
    handleOptions2(event) {
    }
  }
}
</script>

<style scoped>
.parentarea{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.area1, .area2 {
  /*flex: 1;*/
}
</style>
